<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-26 14:09:47
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-31 17:04:10
-->
<template>
  <div class="agency">
    <div class="top">
      <div class="topTitle">待办中心</div>
      <div class="topTab">
        <template v-for="(item, index) in coreData">
          <div
            :key="index"
            class="core"
            :class="item.value == active ? 'active' : ''"
            @click="coreChiose(item, index)"
          >
            {{ item.label }}
          </div>
        </template>
      </div>
    </div>
    <div class="content">
      <template v-for="(item, index) in toDoList">
        <div :key="index" class="contentDetail" v-if="item.subModule != null">
          <div class="detailWriting">
            {{ item.sender }}提交了
            <span class="detailWritingSpan" @click="gotoDetail(item)">
              {{ item.content }}
            </span>
            的{{ item.subModule | subModule }}申请，请及时处理
          </div>
          <div class="detailTime">
            {{ item.createTime }}
          </div>
        </div>
        <div :key="index" class="contentDetail" v-else>
          <div class="detailWriting">
            {{ item.sender }}您的
            <span class="detailWritingSpan" @click="gotoDetail(item)">
              {{ item.content }}
            </span>
            任务即将到期，请及时处理
          </div>
          <div class="detailTime">
            {{ item.createTime }}
          </div>
        </div>
      </template>
    </div>
    <div class="footer">
      <div class="footer-left">共{{ total }}条</div>
      <div class="footer-right" @click="$router.push('/doCenter')">
        查看全部
      </div>
    </div>
    <drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.dialogDrawerEject"
    ></drawer>
    <exp-drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.expDrawerEject"
    ></exp-drawer>
    <xshk-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      :crmType="crmType"
      :publicId="publicId"
      :columnId="columnId"
      v-if="dialog.xshkShowDrawerEject"
    ></xshk-drawer>
    <coupon-drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.couponDrawerEject"
    ></coupon-drawer>
    <task-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.taskDrawerEject"
    ></task-drawer>
  </div>
</template>

<script>
import {
  select,
  haveContractRole,
  xshkSelect,
  planSelect,
  haveRecoveryRole,
  havePayContractRole,
  haveCouponRole,
  Couponselect,
} from "@/api/user";
import { detailInfo } from "@/api/task/dailyTask";
import { toDoList } from "@/api/index";
import drawer from "../../../layout/components/every/drawer.vue";
import XshkDrawer from "../../../layout/components/every/xshkDrawer.vue";
import ExpDrawer from "../../../layout/components/every/expDrawer.vue";
import CouponDrawer from "../../../layout/components/every/couponDrawer.vue";
import taskDrawer from "../../../views/task/dailyTask/components/drawer.vue";
export default {
  components: {
    drawer,
    XshkDrawer,
    ExpDrawer,
    CouponDrawer,
    taskDrawer,
  },
  filters: {
    subModule: function (val) {
      if (val == 28) {
        val = "合同";
      } else if (val == 29) {
        val = "回款";
      } else if (val == 30) {
        val = "支付合同";
      } else if (val == 31) {
        val = "优惠券";
      }
      return val;
    },
  },
  props: {
    disabled: {
      type: Boolean,
      required: true,
    },
    briTime: {
      type: Number,
      required: true,
    },
    briUser: {
      type: Number,
      required: true,
    },
    userIds: {
      type: Array,
      required: true,
    },
    timeVal: {
      type: Array,
      required: true,
    },
  },
  watch: {
    briTime(newValue, oldValue) {
      if (newValue !== 0) {
        this.getTodoList();
      }
    },
    briUser(newValue, oldValue) {
      if (newValue !== 0) {
        this.getTodoList();
      }
    },
    userIds: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getTodoList();
        }
      },
    },
    timeVal: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getTodoList();
        }
      },
    },
  },
  data() {
    return {
      drawerData: {},
      dialog: {
        activity: true,
        dialogDrawerEject: false,
        dialogDrawer: false,
        expDrawerEject: false,
        expDrawer: false,
        xshkShowDrawerEject: false,
        xshkShowDrawer: false,
        couponDrawerEject: false,
        couponDrawer: false,
        taskDrawerEject: false,
        taskDrawer: false,
        crmInfoShow: false,
        crmInfoShowEject: false,
        aboutShow: false,
        aboutShowEject: false,
        distributionShow: false,
        distributionShowEject: false,
      },
      columnId: 71,
      crmType: 9,
      publicId: Number,
      active: 1,
      total: 0,
      toDoList: [],
      coreData: [
        {
          value: 1,
          label: "待审批",
        },
        {
          value: 2,
          label: "待办任务",
        },
      ],
    };
  },
  created() {
    this.getTodoList();
  },
  methods: {
    // 打开具体事项的抽屉
    gotoDetail(item) {
      this.publicId = item.id;
      if (
        item.subModule !== 28 &&
        item.subModule !== 29 &&
        item.subModule !== 30 &&
        item.subModule !== 31 &&
        item.subModule !== null
      ) {
        this.$router.push(item.url);
      } else if (item.subModule == 28) {
        haveContractRole().then((res) => {
          if (res.data == true) {
            select({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.dialogDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.dialogDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 29) {
        haveRecoveryRole().then((res) => {
          if (res.data == true) {
            if (item.type == 2) {
              planSelect({ id: item.entryId }).then((res) => {
                this.crmType = 8;
                this.columnId = 71;
                this.drawerData = res.data;
                this.dialog.xshkShowDrawerEject = true;
                this.$nextTick(function () {
                  this.dialog.xshkShowDrawer = true;
                });
              });
            } else {
              xshkSelect({ id: item.entryId }).then((res) => {
                this.crmType = 9;
                this.columnId = 72;
                this.drawerData = res.data;
                this.dialog.xshkShowDrawerEject = true;
                this.$nextTick(function () {
                  this.dialog.xshkShowDrawer = true;
                });
              });
            }
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 30) {
        havePayContractRole().then((res) => {
          console.log(res);
          if (res.data == true) {
            Couponselect({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.expDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.expDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 31) {
        haveCouponRole().then((res) => {
          if (res.data == true) {
            Couponselect({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.couponDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.couponDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == null) {
        // 获取详细信息

        detailInfo({ id: item.entryId }).then((res) => {
          this.drawerDatak = res.data;
          this.dialog.taskDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.taskDrawer = true;
          });
        });
      }
    },
    // 获取待办中心
    getTodoList() {
      toDoList({
        type: this.briUser,
        timeUnit: this.briTime,
        times: this.timeVal,
        userIds: this.userIds,
        buType: this.active,
      }).then((res) => {
        this.toDoList = res.list;
        this.total = res.total;
      });
    },
    // 切换tab
    coreChiose(item) {
      this.active = item.value;
      this.getTodoList();
    },
  },
};
</script>

<style lang="less" scoped>
.agency {
  padding: 0 24px;
  width: 584px;
  height: 390px;
  background: #ffffff;
  border-radius: 8px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #ececec;
    .topTitle {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
    .topTab {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
      .core {
        cursor: pointer;
        height: 20px;
        margin-left: 24px;
      }
    }
  }
  .content {
    height: 265px;
    .contentDetail {
      height: 53px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .detailWriting {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2b2b2b;
        .detailWritingSpan {
          cursor: pointer;
          color: #1267fa;
          margin: 0 5px;
        }
      }
    }
    .contentDetail:nth-child(-n + 4) {
      border-bottom: 1px solid #ececec;
    }
  }
  .footer {
    height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ececec;
    .footer-left {
      color: #1267fa;
    }
    .footer-right {
      cursor: pointer;
    }
  }
}
.active {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1267fa;
  border-bottom: 2px solid #1267fa;
}
</style>